<template>
	<view class="home">
		<u-navbar :title="title" placeholder autoBack left-icon-color="#000">
			<template #right>
				<u-text text="确认" @click="_addOrder" color="#0c9bf4" size="32rpx"></u-text>
			</template>
		</u-navbar>
		<view class="form">
			<u-form :model="data.form" label-width="auto">
				<u-form-item label="工单名称" :borderBottom="true">
					<u-input border="none" v-model="data.form.name" input-align="right" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="绑定车辆" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.car_text!='请选择'?'#0C9BF4':'#c0c4cc'"
						:text="data.form.car_text" @click="changeCar"></u-text>
				</u-form-item>
				<u-form-item label="始发城市" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.start_city!='请选择'?'#333':'#c0c4cc'"
						:text="data.form.start_city" @click="changeCity('start_city')"></u-text>
				</u-form-item>
				<u-form-item label="始发地" :borderBottom="true">
					<u-input border="none" v-model="data.form.start_address" input-align="right" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="目的城市" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.end_city!='请选择'?'#333':'#c0c4cc'"
						:text="data.form.end_city" @click="changeCity('end_city')"></u-text>
					<!-- <u-input suffix-icon="arrow-right" border="none" v-model="data.form.end_city" suffixIconStyle="color:#9e9e9e"
						readonly placeholder="请选择" input-align="right"></u-input> -->
				</u-form-item>
				<u-form-item label="目的地" :borderBottom="true">
					<u-input border="none" placeholder="请选择" v-model="data.form.end_address" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="公里数" :borderBottom="true">
					<u-input border="none" placeholder="请选择" v-model="data.form.kilometers" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="货物名称" :borderBottom="true">
					<u-input border="none" placeholder="请选择" v-model="data.form.goods_name" input-align="right"></u-input>
				</u-form-item>
				<!-- <u-form-item label="费用" :borderBottom="true" v-if="data.userInfo.group_id == 1">
					<up-radio-group v-model="data.form.status">
						<up-radio label="应收款" :name="1"> </up-radio>
						<up-radio label="应付款" style="marginLeft:40rpx" :name="2"> </up-radio>
					</up-radio-group>
				</u-form-item> -->
				<u-form-item label="应收款" :borderBottom="true" v-if="data.form.status == 1">
					<u-input border="none" placeholder="请输入" v-model="data.form.money" input-align="right"></u-input>
				</u-form-item>
				<!-- <block v-if="data.form.status == 2">
					<u-form-item :label="item.title" :borderBottom="true" v-for="(item,index) in data.configArr" :key="item.id">
						<u-input border="none" placeholder="请输入" v-model="yingfu_money[item.id]" input-align="right"></u-input>
					</u-form-item> -->
					<!-- 					<u-form-item label="税票费" :borderBottom="true">
						<u-input border="none" placeholder="请输入" v-model="data.yingfu_money.piaofei" input-align="right"></u-input>
					</u-form-item>
					<u-form-item label="高速费" :borderBottom="true">
						<u-input border="none" placeholder="请输入" v-model="data.yingfu_money.gaosu" input-align="right"></u-input>
					</u-form-item> -->
				<!-- </block> -->
			</u-form>
		</view>
		<up-picker :show="data.carShow" closeOnClickOverlay :columns="data.car" @cancel="changeCar" @confirm="confirmCar"
			keyName="number"></up-picker>
		<region-item :regionShow="data.regionShow" @update:regionShow="data.regionShow = $event"
			@confirmRegion="confirmRegion"> </region-item>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		addOrder,
		carList,
		configlist,
		orderInfo,
		yingfuGroup
	} from "../../config/api";
	import { getCache } from "../../util/util";
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		},
	})
	const title = ref('')
	if (props.id) {
		title.value = '编辑工单'
	} else {
		title.value = '创建工单'
	}
	const data = ref({
		form: {
			car_text: '请选择',
			start_city: '请选择',
			end_city: '请选择',
			status: 1
		},
		car: [],
		carShow: false,
		regionShow: false,
		currentKey: '',
		userInfo: getCache('userInfo'),
		configArr: []
	});
	const yingfu_money = ref({})
	onMounted(() => {
		if (props.id) {
			_orderInfo()
		}else{
			_yingfuGroup()
		}
		_carList()
		if (data.value.userInfo.group_id == 2) {
			data.value.form.car_text = data.value.userInfo.car_number
			data.value.form.status = 2
		}
	})
	const _yingfuGroup = () => {
		yingfuGroup().then(res => {
			data.value.configArr = res.data.map(item => {
				yingfu_money.value[item.id] = '0'
				return item
			})
		})
	}
	const confirmRegion = (row) => {
		data.value.form[data.value.currentKey] = row.city_text
		data.value.regionShow = false
	}
	const changeCity = (row) => {
		data.value.currentKey = row
		data.value.regionShow = true
	}
	// 确认选择
	const confirmCar = (row) => {
		console.log(row)
		data.value.form.car_text = row.value[0].number
		data.value.form.car_id = row.value[0].id
		data.value.carShow = false
	}
	// 选择车辆
	const changeCar = () => {
		if (data.value.userInfo.group_id == 2) return
		data.value.carShow = !data.value.carShow
		console.log(data.value.car)
	}
	// 车辆列表
	const _carList = () => {
		carList().then(res => {
			console.log(res)
			data.value.car = [res.data]
		})
	}
	const _orderInfo = () => {
		orderInfo({
			order_id: props.id
		}).then(res => {
			data.value.form = res.data
			data.value.form.car_text = res.data.car_number
			data.value.configArr = res.data.yingfu_group.map(item => {
				item.id = item.type_id
				yingfu_money.value[item.type_id] = item.money
				return item
			})
			console.log(yingfu_money.value)
			// if (res.data.yingfu_money) {
			// 	yingfu_money.value = JSON.parse(res.data.yingfu_money.replace(/&quot;/g, '"'))
			// }
		})
	}
	const _addOrder = () => {

		addOrder({
			...data.value.form,
			order_id: props.id ? props.id : '',
			yingfu_money: JSON.stringify(yingfu_money.value)
		}).then(res => {
			uni.$u.toast(res.msg)
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #fafafa;
	}

	.form {
		padding: 0 24rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	::v-deep .u-form-item__body {
		padding: 30rpx 0;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end;
	}
</style>